<template>
    <div class="newsinfo-contain">
        <h3 class="title">{{newsinfo.title}}</h3>
        <p class="info">
            <span>发表时间：{{newsinfo.add_time | dataFormat}}</span>
            <span>点击：{{newsinfo.click}}</span>
        </p>
        <hr>
        <!-- 新闻内容 -->
        <div class="content" v-html="newsinfo.content"></div>

        <!-- 评论组件 -->
        <!-- 父组件向子组件传值 -->
        <comment :newid="id"></comment>
    </div>
</template>

<script>
//导入Comment.vue子组件
import comment from "../sub-components/Comment.vue";

export default {
    data(){
        return{
            newsinfo:{}//新闻详情
        }
    },
    methods:{
        async getNewsInfo(){//根据id获取行文的详情
            const {data} = await this.$http.get("/api/getnew/"+this.id);
            if(data.status === 0) return this.newsinfo = data.message[0]
        }
    },
    created(){
        this.getNewsInfo();
    },
    props:['id'],
    components:{
        //为当前NewsInfo.vue组件注册私有子组件
        comment,
    },
}
</script>

<style lang="scss" scoped>
.newsinfo-contain{
    padding: 3px;
    .title{
        font-size: 15px;
        text-align: center;
        color: red;
        margin: 15px;
    }
    .info{
        color: #26a2ff;
        display: flex;
        justify-content: space-between;
    }
}
</style>